<template>
  <div class="application-form">
    <div class="application-form-info">
      <div class="info-box">
        <div class="info-text">申请事项&nbsp;:</div>
        <div class="info-input"><input type="text" placeholder="请填写你的申请事项" v-model="matter"></div>
      </div>
      <div class="info-box">
        <div class="info-text">申&nbsp;&nbsp;请&nbsp;&nbsp;人:</div>
        <div class="info-input"><input type="text" placeholder="请填写你的真实姓名" v-model="applicationPeople"></div>
      </div>
      <div class="info-box">
        <div class="info-text">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话:</div>
        <div class="info-input"><input type="text" placeholder="请输入电话" v-model="phone"></div>
      </div>
      <div class="info-box">
        <div class="info-text">申请金额&nbsp;:</div>
        <div class="info-input"><input type="text" placeholder="请填写申请金额" v-model="money"></div>
      </div>
      <div class="info-box-img">
        <upload-img @getImgIdList="getImgList"></upload-img>
      </div>
      <div class="info-box-mode">
        <div class="info-text">&nbsp;&nbsp;申请说明&nbsp;:</div>
        <div class="info-input"><textarea maxlength=-1 class="info-mode" placeholder="请填写你的说明"  v-model="info"/></div>
      </div>
    </div>
    <div class="application-form-btn" @click='feeApplication'>提交</div>
  </div>
</template>

<script>
import uploadImg from '@/components/uploadImg';
export default {
  data() {
    return {
      matter:'',//申请事项
      applicationPeople:'',//申请人
      phone:'',
      money:'',
      info:'',
      imgList:''
    }
  },
  components:{
    uploadImg
  },
  methods: {
    async feeApplication(){
      //提交
      const userToken=wx.getStorageSync('userToken');
      const res=await this.$api.feeApplication({
          application_people:this.applicationPeople,
          phone:this.phone,
          matter:this.matter,
          money:this.money,
          info:this.info,
          user_token:userToken
      })
      this.$currency.showToast(res.data.message);
      setTimeout(()=>{
          if(res.data.level=='success'){
          this.$currency.switchTab('/pages/meMain/me/main');
        }
      },1000)
    },
    async getUserInfo(){
      const userToken=wx.getStorageSync('userToken');
      let res=await this.$api.getUserInfo({
        user_token:userToken
      })
      if(res.data.level=='success'){
        this.applicationPeople=res.data.data.user_info.user_vip.realname;
        this.phone=res.data.data.user_info.user_vip.phone;
      }
    },
    getImgList(e){
      this.imgList=e
    },
    initData(){
      //恢复原始状态
      this.matter='';
      this.applicationPeople='';
      this.phone='';
      this.money='';
      this.info='';
      this.imgList='';
    }
  },
  onShow(){
    this.initData();
    this.getUserInfo()
  }
} 
</script>

<style lang="scss" scoped>
  .application-form{
    width: 100%;
    overflow-x: hidden;
    height: 100vh;
    background-color: #f1f1f1;
    padding-top: 20rpx;
    .info-text{
      flex: 1;
      text-align: center;
    }
    .info-input{
      flex: 2;
    }
    .application-form-info{
      width: 100%;
      background-color: #fff;
      .info-box{
        border: 1px solid #f1f1f1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        padding: 20rpx;
      }
      .info-box-img{

        padding:20rpx;
      }
      .info-box-mode{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        padding: 20rpx;
        .info-text{
          width: 100%;
          height: 200rpx;
        }
        .info-input{
          border: 1px #f1f1f1 solid;
        }
        .info-mode{
          padding: 20rpx;
          width: 100%;
          height: 200rpx;
        }
      }
    }
    .application-form-btn{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      background-color: rgb(110, 189, 235);
      color: #fff;
      font-size: 16px;
      :active{
        background-color: rgb(6, 127, 240);
      }
    }
    .region-content{
      color: #666;
    }
  }
</style>